<template>
  <div class="container">
    <vue-tree
        :collapseEnabled="false"
        :config="treeConfig"
        :dataset="data"
        linkStyle="straight"
        style="width: 800px; height: 600px; border: 1px solid gray;"
    >
      <template v-slot:node="{ node, collapsed }">
        <div
            :style="{ border: collapsed ? '2px solid grey' : '' }"
            class="rich-media-node"
            @click="handleClickNode(node)"
        >
          <span style="padding: 4px 0; font-weight: bold;"
          >{{ node.struct.name }}<br/>{{ node.value }}</span
          >
        </div>
      </template>
    </vue-tree>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>当前节点</span>
      </div>
      <el-form
          ref="formRef"
          :model="currentNode"
          label-position='left'
          label-width="100px"
      >
        <el-form-item label="节点ID" prop="name">
          <el-tag>{{ currentNode.id }}</el-tag>
        </el-form-item>
        <el-form-item label="父节点ID" prop="parentId">
          <el-tag>{{ currentNode.parentId }}</el-tag>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-tag>{{ currentNode.struct.name }}</el-tag>
        </el-form-item>
        <el-form-item label="数值" prop="weight">
          <el-tag>{{ currentNode.value }}</el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      treeConfig: {nodeWidth: 120, nodeHeight: 80, levelHeight: 200},
      currentIndex: 0,
      currentNode: {},
      treeid: 0,
    }
  },
  //mounted页面渲染完毕
  async mounted() {
    const treeid = this.$route.query.treeid
    const res = await this.$http.get(`/data-tree/select-whole-one?treeId=${treeid}`)

    if (res.code !== 200) {
      return this.$message.error('获取指标树失败')
    }

    this.data = res.data.root
    this.currentNode = this.data
  },
  methods: {
    async handleClickNode(node) {
      this.currentIndex = node.id
      this.currentNode = node
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
}

.rich-media-node {
  width: 80px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: white;
  background-color: #f7c616;
  border-radius: 4px;
}

.box-card {
  width: 500px;
  height: 350px;
}
</style>